<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="head paddingLR">
				<p class="title">
					{{ editData.id ? $t('common.edit') : $t('common.add') }}
				</p>
				<p class="right-btn">
					<el-button type="success" @click="serve">
						{{ $t('common.save') }}
					</el-button>
				</p>
				<p class="right-btn">
					<el-button plain @click="goBack">
						{{ $t('common.cancel') }}
					</el-button>
				</p>
			</div>
			<el-form
				ref="form"
				:rules="rules"
				:model="formData"
				label-width="auto"
				class="formBox"
			>
				<el-form-item
					:label="$t('agent.domain') + ':'"
					prop="domainName"
				>
					<el-input
						v-model="formData.domainName"
						:placeholder="$t('common.please_enter')"
						:maxlength="500"
						@blur="checkValue($event)"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('agent.description') + ':'"
					prop="description"
					:rules="[
						// {
						// 	required: true,
						// 	message: $t('agent.rule_input_tip_desc'),
						// 	trigger: 'blur'
						// },
						{
							min: 0,
							max: 50,
							message: $t('agent.rule_length_tip0-50'),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model="formData.description"
						type="textarea"
						:maxlength="50"
						show-word-limit
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('common.choose_merchant') + ':'"
					prop="merchantId"
				>
					<merchant-select
						v-model="formData.merchantId"
						:placeholder="$t('common.please_choose')"
						:disabled="control || merchantList.length === 1"
						style="width: 100%"
						:merchantInfo.sync="merchantinfo"
					></merchant-select>
				</el-form-item>
				<el-form-item :label="$t('agent.domain_type') + ':'">
					<el-select
						v-model="formData.domainType"
						size="medium"
						:placeholder="$t('common.all')"
						style="width: 100%"
					>
						<el-option
							v-for="item in enumProxyDomainTypeOperate"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					v-if="control"
					:label="$t('common.sort') + ':'"
					prop="displayOrder"
				>
					<el-input v-model.number="formData.displayOrder"></el-input>
				</el-form-item>
				<el-form-item :label="$t('common.status') + ':'">
					<el-select
						v-model="formData.status"
						:placeholder="$t('common.please_choose')"
						:disabled="!control"
						style="width: 100%"
					>
						<el-option
							v-for="item in domainStatusType"
							:key="item.description"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('common.remark') + ':'"
					prop="remark"
					:rules="[
						{
							required: true,
							message: this.$t('agent.rule_input_tip_remark'),
							trigger: 'blur'
						},
						{
							min: 2,
							max: 500,
							message: this.$t('agent.rule_length_tip2-500'),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model="formData.remark"
						type="textarea"
						:maxlength="500"
						show-word-limit
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
export default {
	name: routerNames.domainCreateAndEidt,
	components: {},
	mixins: [list],
	props: {
		editData: {
			type: Object,
			default: () => ({})
		},
		control: {
			type: Boolean,
			default: false
		}
	},
	data() {
		this.serve = this.throttle(this.serve, 1000)
		return {
			formData: this.editData,
			// control: true
			merchantinfo: {}
		}
	},
	computed: {
		domainStatusType() {
			return this.globalDics.domainStatusType || []
		},
		enumProxyDomainTypeOperate() {
			return this.globalDics.enumProxyDomainTypeOperate || []
		},
		appIdArr() {
			return this.globalDics.appId || []
		},
		rules() {
			const domainNameRes = (rule, value, callback) => {
				const res = /^(http|https):\/\/([\w.]+\/?)\S*/
				if (res.test(value)) {
					callback()
				} else {
					callback(this.$t('agent.rule_domain_tip'))
				}
			}
			const checkAge = (rule, value, callback) => {
				if (value && !Number.isInteger(value)) {
					callback(new Error(this.$t('agent.rule_input_tip_number')))
				} else {
					if (Number.isInteger(value) && value <= 0) {
						callback(new Error(this.$t('agent.rule_sort_tip')))
					} else {
						callback()
					}
				}
			}
			const domainName = [
				{
					required: true,
					validator: domainNameRes,
					trigger: 'blur'
				},
				{
					min: 0,
					max: 500,
					message: this.$t('agent.rule_length_tip0-500'),
					trigger: 'blur'
				}
			]
			const merchantId = [
				{
					required: true,
					trigger: 'blur',
					message: this.$t('agent.rule_select_tip_merchant')
				}
			]
			const displayOrder = [{ validator: checkAge, trigger: 'blur' }]
			return { domainName, merchantId, displayOrder }
		}
	},
	watch: {},
	created() {
		this.formData = Object.assign({}, this.editData)
		if (!this.control && this.merchantList.length === 1) {
			this.formData.merchantId = this.merchantList[0]['id']
		}
	},
	mounted() {},
	methods: {
		checkValue(e) {
			const { value } = e.target
			this.formData.domainName = value
		},
		goBack(val) {
			this.$refs.form.resetFields()
			this.$emit('change-type', true)
		},
		serve() {
			const params = {
				...this.formData,
				// appId:1,
				merchantName: this.merchantinfo?.merchantName
			}
			this.$refs.form.validate((valid) => {
				if (valid) {
					if (!this.control) {
						this.$confirm(this.$t('agent.is_create_enter'), {
							confirmButtonText: this.$t('common.confirm'),
							cancelButtonText: this.$t('common.cancel'),
							type: 'success'
						})
							.then(() => {
								this.$api
									.addDomainInsert(params)
									.then((res) => {
										if (res?.code === 200) {
											this.$message.success(
												this.$t('agent.create_success')
											)
											this.$emit('change-type', true)
											setTimeout(() => {
												this.$parent.search()
											}, 1500)
										}
									})
							})
							.catch(() => {})
					} else {
						this.$confirm(this.$t('agent.is_edit_enter'), {
							confirmButtonText: this.$t('common.confirm'),
							cancelButtonText: this.$t('common.cancel'),
							type: 'warning'
						})
							.then(() => {
								this.$api
									.setDomainUpdate(this.formData)
									.then((res) => {
										if (res?.code === 200) {
											this.$message.success(
												this.$t('common.modify_success')
											)
											this.$emit('change-type', true)
											setTimeout(() => {
												this.$parent.search()
											}, 1500)
										}
									})
							})
							.catch(() => {})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.view-container {
	border: 1px solid #dcdfe6;
	font-size: 14px;
	width: 50%;
	min-width: 700px;
	height: 650px;
	margin: 0 auto;
}
.paddingLR {
	padding: 0 30px;
}
.head {
	height: 70px;
	line-height: 70px;
	width: 100%;
	background: #000;
	border-radius: 2px;

	.title {
		font-weight: 600;
		font-size: 16px;
		color: rgb(192, 190, 190);
		float: left;
	}
	.right-btn {
		float: right;
		margin-left: 20px;
	}
}
.strong {
	height: 70px;
	line-height: 80px;
}
.paddingB {
	padding-bottom: 30px;
}
.formBox {
	width: 70%;
	margin: 100px auto;
	margin-top: 50px;
}
</style>
